<template>
    <div class="app-container  photoRegisterDailog">
        <div class="main-container-content">
            <el-row :gutter="10">

                <div class="contentBoxs_form">

                    <el-col :xs='24' :sm="16" :md="11" :lg="11" :xl="10">

                        <el-form :model="baseInfo" :rules="baseInfoFormRules" ref="baseInfoForm" label-width="78px"
                            class="demo-ruleForm contentBoxs_form_box">
                            <div class="photoRegisterDailog_title">
                                <div class="titleContent_left">
                                    <div class="titleContent_left_line"></div>
                                    <div class="titleContent_left_title">
                                        检验指标
                                    </div>
                                </div>
                                <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>

                            </div>
                            <div class="contentDailog_contents">


                                <el-form-item label="检验指标" prop="teacher">
                                    <el-select v-model="baseInfo.sex" placeholder="请选择" clearable class="idNumInput0">
                                        <el-option v-for="dict in sexArray" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="检验结果" prop="student">
                                    <el-input v-model="baseInfo.id" placeholder="教学库编号" class="idNumInput0">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="单位" prop="teacher">
                                    <el-select v-model="baseInfo.sex" placeholder="请选择" clearable class="idNumInput0">
                                        <el-option v-for="dict in sexArray" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                                <div class="flexDiv">
                                    <el-form-item label="参考值" prop="num">
                                        <el-input v-model="baseInfo.num" placeholder="" class="sexInput">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="" prop="num" label-width="0px" class="noLabelItem">
                                        ————
                                    </el-form-item>

                                    <el-form-item label="" prop="num" label-width="0px" class="noLabelItem">
                                        <el-input v-model="baseInfo.num" placeholder="" class="sexInput">
                                        </el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item label="异常提示" prop="teacher">
                                    <el-select v-model="baseInfo.sex" placeholder="请选择" clearable class="idNumInput0">
                                        <el-option v-for="dict in sexArray" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>


                                <el-form-item>
                                    <el-button @click="closeEvent">关 闭</el-button>
                                    <el-button type="primary" @click="submitForm()">保 存</el-button>

                                </el-form-item>
                            </div>

                        </el-form>

                    </el-col>
                </div>
            </el-row>

        </div>

    </div>
</template>
    
<script>



//自定义校验规则
var checkIdCard = (rule, value, cb) => {
    const regIdCard =
        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if (regIdCard.test(value)) {
        return cb();
    }
    cb(new Error("您输入的身份证号码不是有效格式"));
};
var checkPatientPhone = (rule, value, cb) => {
    const regPatientPhone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
    if (regPatientPhone.test(value)) {
        return cb();
    }
    cb(new Error("您输入的手机号码不是有效格式"));
};
export default {
    name: "Index",
    dicts: [

    ],
    components: {

    },
    data() {
        return {
            deptOptionsStatus: true,
            confirmDialog: false,
            fixedBackRgb: "rgba(73, 185, 173, 1)",
            loginDialog: false,
            open: false,

            // 顾客信息
            baseInfo: {
                num: undefined,
                id: undefined,
                name: undefined,
                teacher: undefined,
                student: undefined,
                release: 0,
                verify: 0,
                remark: undefined
            },
            dateValue: '',
            // 顾客选择弹窗
            patientVisible: false,
            patientVisibleList: [],
            confirmIdNumShow: false,
            // 省市区
            areaList: [],
            deptOptions: [],

            sexArray: [
                {
                    value: '0',
                    label: '女'
                }, {
                    value: '1',
                    label: '男'
                }
            ],
            // 表单校验
            baseInfoFormRules: {
                idNum: [
                    {
                        required: true,
                        message: "身份证号不能为空",
                        trigger: "blur",
                    },
                    { validator: checkIdCard, trigger: "blur" },
                ],
                patientName: [
                    {
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur",
                    },
                ],
                sex: [
                    {
                        required: true,
                        message: "性别不能为空",
                        trigger: "blur",
                    },
                ],
                birthDate: [
                    {
                        required: true,
                        message: "出生年月不能为空",
                        trigger: "blur",
                    },
                ],
                patientPhone: [
                    {
                        required: true,
                        message: "手机号不能为空",
                        trigger: "blur",
                    },
                    { validator: checkPatientPhone, trigger: "blur" },
                ],

            },

        };
    },
    computed: {

    },
    mounted() {

        this.open = true
    },
    methods: {
        submitForm() {
            this.$emit('close')
        },
        closeEvent() {
            this.$emit('close')
        },
    }
};
</script>
    
<style scoped lang="scss">
.photoRegisterDailog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .photoRegisterDailog_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

    }
}
</style>
    
    